<template>
  <div>
    <search-vm :title="tit" @refreshList="getVendingTypeSearch" />
    <div class="main">
      <el-row>
        <el-button size="small" class="add-btn" @click="addNode">新建</el-button>
      </el-row>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="name"
          label="型号名称"
          width="120"
          height="20px"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>

        <el-table-column
          prop="model"
          label="型号编码"
          width="120"
          height="20px"
        />
        <el-table-column
          label="设备图片"
          show-overflow-tooltip
          height="20px"
          prop="image"
        >
          <template slot-scope="{row}">
            <img :src="row.image" alt="" class="img-type">
          </template>
        </el-table-column>
        <el-table-column
          prop="vmRow"
          label="货道行"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          prop="vmCol"
          label="货道列"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          prop="channelMaxCapacity"
          label="设备容量"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          height="20px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.prevent="lookAmend(scope.row)"
            >
              修改
            </el-button>
            <el-button
              v-loading="loading"
              type="text"
              size="small"
              class="del-type"
              @click.prevent="lookDetails(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          background
          :page-size.sync="pageSize"
          :current-page.sync="pageIndex"
          layout="total,prev, next"
          :total="total"
          @current-change="getVendingTypeSearch"
        />
      </el-row>
    </div>
    <!-- 修改 -->
    <amend-type ref="formType" :dialog-visible.sync="dialogVisible" />
  </div>
</template>

<script>
import amendType from './components/amendType'
import { getVendingTypeSearchAPI, getVendingDelAPI } from '@/api/vmType'
import searchVm from '../components/search-vm'
export default {
  name: '',
  components: {
    searchVm,
    amendType
  },
  props: {},
  data() {
    return {
      tit: '型号搜索:',
      tableData: [],
      pageSize: 10,
      pageIndex: 1,
      loading: false,
      total: 0,
      dialogVisible: false // 弹窗
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getVendingTypeSearch()
  },
  methods: {
    // 发起列表请求
    async getVendingTypeSearch(name) {
      try {
        this.loading = true
        const { data } = await getVendingTypeSearchAPI(this.pageIndex, this.pageSize, name)
        // console.log(data)
        this.tableData = data.currentPageRecords
        this.total = parseInt(data.totalCount) // 转数值型
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 修改
    async lookAmend(row) {
      this.dialogVisible = true
      console.log(row)
      this.$refs.formType.form = { ...row }
    },
    addNode() {
      this.dialogVisible = true
    },
    async lookDetails(row) {
      // 二次确认
      await this.$confirm('确认删除吗?', '提示', {
        type: 'warning'
      })
      try {
        this.loading = true
        // 调用接口
        await getVendingDelAPI(row.typeId)
        // 提示成功
        this.$message.success('删除成功')
        // 刷新页面
        this.getVendingTypeSearch()
      } catch (error) {
        this.$message.error('该售货机类型在使用')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
}
.img-type{
  width: 25px;
}
.add-btn{
    width: 80px;
    height: 36px;
    color: #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
  }
  .del-type{
    color: red;
  }
</style>
